<template>
  <div id="map"></div>
</template>

<script setup>
import GeoJSON from "ol/format/GeoJSON.js";
import Layer from "ol/layer/Layer.js";
import Map from "ol/Map.js";
import View from "ol/View.js";
import Feature from "ol/Feature";
import LineString from "ol/geom/LineString";
import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer.js";
import { Draw, Modify, Snap } from "ol/interaction.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer } from "ol/layer.js";
import { fromLonLat } from "ol/proj.js";
import { onMounted } from "@vue/runtime-core";
import nansha_data from "./nansha_data";

onMounted(() => {
  /**
   * @type {import('ol/style/webgl.js').WebGLStyle}
   */
  let style;

  class WebGLLayer extends Layer {
    createRenderer() {
      return new WebGLVectorLayerRenderer(this, {
        className: this.getClassName(),
        style,
      });
    }
  }

  const lineFeature = [];
  for (let i = 0; i <= nansha_data.pipe_vertices.length - 1; i++) {
    let res = [];
    nansha_data.pipe_vertices[i].forEach((item) => {
      res.push(fromLonLat([item[1], item[0]]));
    });
    lineFeature.push(
      new Feature({
        geometry: new LineString(res),
        name: "Line",
      })
    );
  }

  const source = new VectorSource({
    features: lineFeature,
  });

  /**
   * @param {boolean} dash Include line dash
   * @param {boolean} pattern Include image pattern
   * @return {import('ol/style/webgl.js').WebGLStyle} Generated style
   */
  const getStyle = (dash, pattern) => {
    let newStyle = {
      variables: style
        ? style.variables
        : {
            width: 12,
            offset: 0,
            capType: "butt",
            joinType: "miter",
            miterLimit: 10, // ratio
            dashLength1: 25,
            dashLength2: 15,
            dashLength3: 15,
            dashLength4: 15,
            dashOffset: 0,
            patternSpacing: 0,
          },
      "stroke-width": ["var", "width"],
      "stroke-color": "rgba(24,86,34,0.7)",
      "stroke-offset": ["var", "offset"],
      "stroke-miter-limit": ["var", "miterLimit"],
      "stroke-line-cap": ["var", "capType"],
      "stroke-line-join": ["var", "joinType"],
    };
    if (dash) {
      newStyle = {
        ...newStyle,
        "stroke-line-dash": [
          ["var", "dashLength1"],
          ["var", "dashLength2"],
          ["var", "dashLength3"],
          ["var", "dashLength4"],
        ],
        "stroke-line-dash-offset": ["var", "dashOffset"],
      };
    }
    if (pattern) {
      delete newStyle["stroke-color"];
      newStyle = {
        ...newStyle,
        "stroke-pattern-src": "data/dot.svg",
        "stroke-pattern-spacing": ["var", "patternSpacing"],
      };
    }
    return newStyle;
  };

  style = getStyle(false, false);

  let vector = new WebGLLayer({
    source,
  });

  const map = new Map({
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
      vector,
    ],
    target: "map",
    view: new View({
      center: fromLonLat([8.43, 46.82]),
      zoom: 7,
    }),
  });
});
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>
